<template>
  <div>
    <div class="nav px-2 pt-3 nav-swiper">
      <div class="nav-item nav-swiper-san" v-for="(category,i) in categories" :key="i" :class="{active: active===i}" @click="active=i">
        <div class="nav-link px-3 fs-md py-2" @click="$refs.list.swiper.slideTo(i)">{{category.name}}</div>
      </div>
    </div>
    <!-- 下边具体新闻 -->
    <div class="pt-3">
      <swiper ref="list" @slide-change="() => active = $refs.list.swiper.realIndex" :options="{ autoHeight: true }">
        <swiper-slide  v-for="(category,i) in categories" :key="i">
          <div>
            <div class="p-2">
              <span class="fs-xl text-blue-1"><strong>{{category.bigTitle}}</strong></span>
              <span class="ml-3 p-1 text-grey border">官方举办</span>
            </div>
            <img class="mt-3 img" :src="category.img">
            <div class="fs-lg bg-light-2 text-dark-3 text-center py-2 my-2">赛事资讯</div>
            <routerLink :to="`/competition/${item._id}`" tag="div" class="d-flex jc-between p-2 mt-1 item" v-for="(item,i) in category.news" :key="i">
              <span class="flex-1 text-ellipsis fs-lg text-dark">{{item.title}}</span>
              <span class="text-grey fs-md">{{category.createdAt | date}}</span>
            </routerLink>
          </div>
          <div class="fs-lg bg-light-2 text-dark-3 text-center py-2 my-2 border-1">已显示全部内容</div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  data() {
    return {
      active: 0,
      categories: []
    }
  },
  methods: {
    async fetch() {
      const res = await this.$http.get('/match')
      this.categories = res.data
    }
  },
  created() {
    this.fetch()
  },
  filters: {
    date(val) {
      return dayjs(val).format('MM/DD')
    }
  }
}
</script>

<style lang="scss">
  .nav-swiper {
    overflow-x: auto;
    white-space: nowrap;
    .nav-swiper-san {
      float: left;
    }
  }
  .border {
    border: 1px solid #ccc;
    border-radius: 2.1875rem;
  }
  .border-1 {
    border-radius: 2.1875rem;
  }
  .img {
    width: 100%;
  }
  .item {
    line-height: 1.5rem;
  }
</style>